<template>
	<view>
		<uni-search-bar class="uni-mt-10" radius="10" placeholder="想它却找不到，没关系，直接搜一搜~" clearButton="auto"
			cancelButton="none" @confirm="search" />
		<view class="pic">
			<view class="pic-one" v-for="(item,index) in getQueryrCommodityCategorysList" :key="index"
				@click="QueryCategory(item.categoryId)">
				<image :src="basUrl + item.categoryPicture" mode=""></image>
			</view>

		</view>

		<view class="wenzione">
			<view class="pic-wenzi" v-for="(item,index) in getQueryrCommodityCategorysList" :key="index">
				<text>{{item.categoryName}}</text>
			</view>
		</view>
		<view class="koudai">
			<view :class="isKoudai?'koudai-one': 'koudai-two'  " v-for="(item,index) in koudailistArr"
				@click="changeKodai(item.id)" :key="item.id" @tap="activeId(packId)">
				<!-- :class="packId == item.id?""" -->
				<text class="koudai-name">{{item.name}}</text>
			</view>
			<view class="koudai-add" @tap="koudaiAdd"></view>
		</view>


		<view class="tuijian">推荐菜品</view>
		<!-- + 'left:'+item.left+'px;' -->
		<view class="main">

			<view v-for="(item, index) in csListArrl" :key="index" :data-index="index" class="order-item"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+item.right+'px;'">
				<view class="item-content">
					<view class="content-two">
						<view class="content-two-pic" @tap="toDetail(index)">
							<image :src="basUrl+item.pictureUrl" mode=""></image>
						</view>
						<view class="content-two-name">{{item.goodsName}}</view>
						<view class="content-two-weight">{{item.weight}}</view>
						<view class="content-two-nocoln" v-if="item.collect == 1">
							<view class="pic"></view>
							<view class="wenzi">已收藏</view>
						</view>
						<view class="content-two-nocoln" v-if="item.collect == 0">
							<view class="pic-two"></view>
							<view class="wenzi">未收藏</view>
						</view>
						<view class="haopin"><text>月售{{item.monthlySales}} 好评度{{item.comment}}</text></view>
						<view class="fuhao"></view>
						<view class="price">{{item.price}}</view>
						<view class="add-pic" v-if="item.jia" @click="addPic(index)"></view>
						<view class="jiasuan" v-else>
							<view class="add" @tap="add(index,item)"></view>
							<text class="num">{{item.num}}</text>
							<view class="sub" @click="sub(index)"></view>
						</view>
					</view>
					<view class="remove" @click="delData(item)">
						<view class="remove-pic"> </view>
					</view>
					<view class="collection">
						<view class="collection-pic" @click="shoucang(item.goodsId)" v-if="item.collect == 0">
							</image >
						</view>
						<view class="collection-pictwo" @click="quxiaoshoucang(item.goodsId)" v-if="item.collect == 1">
							</image >
						</view>
					</view>
				</view>

			</view>
		</view>
		<uni-popup ref="popup" type="center">
			<view class="delnum">
				<view class="delnum-pic">
					<image src="../static/Group 12 (1).png" mode=""></image>

				</view>
				<view class="delnum-font">
					您是否要删除该地址？
				</view>
				<view class="delnum-yesornu">
					<view class="delnum-yesornu-no" @click="delnumCloseNo">
						取消
					</view>
					<view class="delnum-yesornu-yes" @click="delnumCloseYes(item)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>

		<FadeAway></FadeAway>

	</view>
</template>



<script>
	import {
		getAllStore,
		getAddPocket,
		QueryCategory,
		QueryUserCollection,
		addUserCollection,
		delUserCollection
		
	} from "@/api/home.js"
	import {
		getQueryrCommodityCategory
	} from "@/api/home.js"
	import {
		basUrl
	} from "@/common/basUrl.js"
	export default {
		name: "ComponentTest1",
		created() {
			// console.log("tt",token);
			this.getData()
			// console.log(this.csListArrl.concat(this.goodsList)) 
			this.getQueryrCommodityCategorys()
			this.QueryCategory()
			this.QueryUserCollection()
		},
		onLoad() {

		},
		data() {
			return {
				basUrl: basUrl,
				searchValue: '',
				//口袋
				packId: 1,
				koudailistArr: [{
					id: 1,
					name: '口袋1',
					goods: []
				}],

				//滑动
				csListArrl: [
					// {
					// 	jia: true,
					// 	right: 0,
					// 	left: 0,
					// 	num: 0
					// }
				],
				goodsList: [{
					s: ""
				}],
				//左滑默认宽度
				delBtnWidth: 80,
				goodressList: [],
				getQueryrCommodityCategorysList: [],
				isKoudai: true,
				total: 0,
				activeItem: 0,
				delList: {},
				

			}
		},
		methods: {
			//删除收藏
			quxiaoshoucang(e){
				this.shouchang = true
				delUserCollection(e).then(res=>{
					console.log("删除收藏用户",res);
				})
			},
			//新增收藏用户
			shoucang(e){
				this.shouchang = false
				addUserCollection(e).then(res=>{
					console.log("新增收藏用户",res);
				})
			},
			//查询用户收藏
			QueryUserCollection(){
				QueryUserCollection().then(res=>{
					console.log("查询用户收藏",res);
					
					
				})
			},
			//查询类别中商品
			QueryCategory(e) {
				QueryCategory(e).then(res => {
					// console.log("查询类别中商品",res.rows[0].goods);
					this.goodsList = res.rows[0].goods
					this.csListArrl = this.goodsList
					this.csListArrl = this.csListArrl.map(item => {
						if (!item.hasOwnProperty('right')) {
							return {
								...item,
								jia: true,
								right: 0,
								left: 0,
								num: 0
							}
						} else {
							return item
						}

					})

					console.log("查询类别中商品", this.csListArrl);
				})
			},
			//查询全部商品
			getData() {
				getAllStore().then(res => {
					console.log("ff", res);
					this.goodsList = res.rows
					this.csListArrl = this.csListArrl.concat(this.goodsList)
					this.csListArrl = this.csListArrl.map(item => {
						if (!item.hasOwnProperty('right')) {
							return {
								...item,
								jia: true,
								right: 0,
								left: 0,
								num: 0
							}
						} else {
							return item
						}

					})

					console.log("搜索", this.csListArrl);
					// console.log("gg",allList);
					// this.goodressList = this.csListArrl
					// console.log("oo",this.goodressList);
				})
			},
			//查询商品类别
			getQueryrCommodityCategorys() {
				getQueryrCommodityCategory().then(res => {
					console.log("aa", res);
					this.getQueryrCommodityCategorysList = res.rows
				})
			},
			// const ss = this.goodsList.push.apply(this.goodsList,this.csListArrl),
			// getGoods(){
			// 	function mergeObj(goodList,csListArrl){
			// 		return csListArrl.map(item=>{
			// 			return {...item,...goodList}
			// 		})
			// 	}
			// },
			//去确认订单
			goConfirmOrder() {
				uni.navigateTo({
					url: "/pages/ConfirmOrder/ConfirmOrder"
				})
			},
			//去详情页
			toDetail(index) {
				uni.setStorage({
					key: "goodsId",
					data: this.csListArrl[index].goodsId
				})
				uni.navigateTo({
					url: "/pages/detail/detail"
				})
			},
			//口袋
			activeId(item) {

				if (item.id == this.packId) {
					return true
				} else {
					return false
				}
			},
			// 切换口袋
			changeKodai(id) {
				this.packId = id
				this.csListArrl.map(item => {
					item.num = 0
					item.jia = true
					for (let i = 0; i < this.koudailistArr[this.packId - 1].goods.length; i++) {
						let itemx = this.koudailistArr[this.packId - 1].goods[i]
						if (item.goodsId == itemx.goodsId) {
							console.log(itemx, item)
							item.num = itemx.num
							if (item.num > 0) {
								item.jia = false
							} else {
								item.jia = true
							}

							break;
						}
						// console.log("jj",item.num);

					}
					console.log("jj", item.num);
				})
				console.log(id, this.koudailistArr[this.packId - 1], this.csListArrl);
			},
			koudaiAdd() {
				// getAddPocket().then(res=>{
				// 	console.log("经济".res);
				// })
				let id = this.koudailistArr.length + 1
				this.koudailistArr.push({
					id: this.koudailistArr.length + 1,
					name: "口袋" + id,
					goods: []
				})

			},

			// 加号
			addPic(index) {
				this.csListArrl[index].jia = false
				this.csListArrl[index].num++;
				let obj = {
					...this.csListArrl[index]
				}
				this.koudailistArr[this.packId - 1].goods.push(obj)
				console.log(this.koudailistArr[this.packId - 1], this.csListArrl);
				this.total = 0
				for (let i = 0; i < this.koudailistArr.length; i++) {
					let item = this.koudailistArr[i]
					for (let j = 0; j < item.goods.length; j++) {
						let itemx = item.goods[j]
						this.total = this.total + itemx.num * itemx.price
						uni.setStorageSync('total', this.total)
					}
				}
				console.log("vv", this.total.toFixed(2), this.koudailistArr);
				this.$emit('goodNumInformation', this.koudailistArr)
				this.$emit('allPrice', this.total)
				uni.setStorage({
					key: "goodNumInformation",
					data: this.koudailistArr
				})
				uni.setStorage({
					key: "allPrice",
					data: this.total
				})

				// uni.setStorage({
				// 	key:"goodsListshow",
				// 	data:this.koudailistArr
				// }),
				// uni.setStorage({
				// 	key:"totalAll",
				// 	data:this.total.toFixed(2)
				// })
			},

			add(index) {
				this.csListArrl[index].num++;
				for (let i = 0; i < this.koudailistArr[this.packId - 1].goods.length; i++) {
					let itemx = this.koudailistArr[this.packId - 1].goods[i]

					if (this.csListArrl[index].goodsId == itemx.goodsId) {
						this.koudailistArr[this.packId - 1].goods[i].num++;
						console.log(this.koudailistArr[this.packId - 1].goods[i].num)
						break;
					}

				}
				this.total = 0
				for (let i = 0; i < this.koudailistArr.length; i++) {
					let item = this.koudailistArr[i]
					for (let j = 0; j < item.goods.length; j++) {
						let itemx = item.goods[j]
						console.log(itemx, itemx.num, itemx.price, itemx.num * itemx.price)
						this.total = this.total + itemx.num * itemx.price
					}

				}
				this.$emit('goodNumInformation', this.koudailistArr)
				this.$emit('allPrice', this.total)
				uni.setStorage({
					key: "goodNumInformation",
					data: this.koudailistArr
				})
				uni.setStorage({
					key: "allPrice",
					data: this.total
				})


				console.log("vv", this.total);


			},
			sub(index) {
				if (this.csListArrl[index].num !== 0) {
					this.csListArrl[index].num--;
					for (let i = 0; i < this.koudailistArr[this.packId - 1].goods.length; i++) {
						let itemx = this.koudailistArr[this.packId - 1].goods[i]
						if (this.csListArrl[index].goodsId == itemx.goodsId) {
							this.koudailistArr[this.packId - 1].goods[i].num--;
							break;

						}

					}
					this.total = 0
					for (let i = 0; i < this.koudailistArr.length; i++) {
						let item = this.koudailistArr[i]
						for (let j = 0; j < item.goods.length; j++) {
							let itemx = item.goods[j]

							this.total = this.total + itemx.num * itemx.price
						}
					}
					console.log("vv", this.total);
					if (this.csListArrl[index].num == 0) {
						this.csListArrl[index].jia = true
					}

				}
				this.$emit('goodNumInformation', this.koudailistArr)
				this.$emit('allPrice', this.total)
				uni.$emit('goodNumInformation', this.koudailistArr)
				uni.$emit('allPrice', this.total)
				uni.setStorage({
					key: "goodNumInformation",
					data: this.koudailistArr
				})
				uni.setStorage({
					key: "allPrice",
					data: this.total
				})
			},

			//左右滑动
			//开始触摸滑动
			drawStart(e) {
				console.log("开始触发");
				console.log(e);
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				console.log("滑动");
				for (var index in this.csListArrl) {
					this.$set(this.csListArrl[index], 'right', 0);

				}
				var touch = e.touches[0];
				var item = this.csListArrl[e.currentTarget.dataset.index];
				var disX = this.startX - touch.clientX;
				// console.log(disX);
				if (disX >= 20) {
					if (disX > this.delBtnWidth) {
						disX = this.delBtnWidth;
					}
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', disX);
				} else if (disX <= -20) {
					if (disX < -this.delBtnWidth) {
						disX = -this.delBtnWidth;
					}
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', disX);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				this.activeItem = e.currentTarget.dataset.index
				console.log("滑动结束");
				var item = this.csListArrl[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', this.delBtnWidth);
				} else if (item.right <= -this.delBtnWidth / 2) {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', -this.delBtnWidth);
				} else {
					this.$set(this.csListArrl[e.currentTarget.dataset.index], 'right', 0);
				}
			},
			//删除方法
			delData(item) {
				this.delList = item
				this.$refs.popup.open('center')

			},
			delnumCloseNo() {
				this.$refs.popup.close()
			},
			delnumCloseYes() {

				for (let j = 0; j < this.csListArrl.length; j++) {
					let itemx = this.csListArrl[j]
					if (this.delList.goodsId == itemx.goodsId) {
						// this.csListArrl.splice(j, 1)
						this.delList.num = 0
						this.delList.jia = true
						this.$set(this.csListArrl[this.activeItem], 'right', 0);
					}
				}



				for (let j = 0; j < this.koudailistArr[this.packId - 1].goods.length; j++) {
					let item = this.koudailistArr[this.packId - 1].goods[j]
					if (this.delList.goodsId == item.goodsId) {
						this.koudailistArr[this.packId - 1].goods.splice(j, 1)
						break;
					}
				}
				console.log(this.koudailistArr[this.packId - 1], this.csListArrl);
				this.$refs.popup.close()
			},

			//搜索狂
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			// input(res) {
			// 	console.log('----input:', res)
			// },
			// clear(res) {
			// 	uni.showToast({
			// 		title: 'clear事件，清除值为：' + res.value,
			// 		icon: 'none'
			// 	})
			// },
			// blur(res) {
			// 	uni.showToast({
			// 		title: 'blur事件，输入值为：' + res.value,
			// 		icon: 'none'
			// 	})
			// },
			// focus(e) {
			// 	uni.showToast({
			// 		title: 'focus事件，输出值为：' + e.value,
			// 		icon: 'none'
			// 	})
			// },
			// cancel(res) {
			// 	uni.showToast({
			// 		title: '点击取消，输入值为：' + res.value,
			// 		icon: 'none'
			// 	})
			// },


		},
	}
</script>

<style lang="scss" scoped>
	.search-result {
		padding-top: 10px;
		padding-bottom: 20px;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 14px;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0px;
	}

	.uni-mt-10 {
		margin-top: 10px;
	}

	.pic {

		width: 100%;
		height: 96rpx;

		display: flex;
		justify-content: space-around;

		.pic-one image {
			width: 96rpx;
			height: 96rpx;
		}

	}

	.wenzione {
		width: 100%;
		height: 28rpx;
		display: flex;
		justify-content: space-around;

		.pic-wenzi text {
			width: 100rpx;
			height: 28rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 28rpx;
			line-height: 28rpx;
			color: #BFBFBF;
			margin-top: 20rpx;
		}
	}

	.tuijian {
		width: 144rpx;
		height: 36rpx;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 1000;
		font-size: 36rpx;
		color: #000000;
		margin-top: 126rpx;
		margin-left: 30rpx;
	}

	//口袋
	.koudai {
		position: absolute;
		width: 100%;
		height: 70rpx;

		margin-top: 40rpx;
		display: flex;

		.koudai-one {
			width: 116rpx;
			height: 56rpx;
			background: #FA8C16;
			border-radius: 12px;
			margin-top: 7rpx;
			margin-left: 20rpx;

			.koudai-name {
				width: 80rpx;
				height: 28rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #FFFFFF;
				margin-left: 30rpx;
			}
		}

		.koudai-two {
			width: 116rpx;
			height: 56rpx;
			// background: #FA8C16;
			border-radius: 12px;
			margin-top: 7rpx;
			margin-left: 20rpx;

			.koudai-name {
				width: 80rpx;
				height: 28rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 28rpx;
				color: #FFFFFF;
				margin-left: 30rpx;
			}
		}

		.koudai-add {
			width: 56rpx;
			height: 56rpx;
			background-image: url("@/static/koudai-add.png");
			background-size: 100%;
			margin-top: 7rpx;
			margin-left: 30rpx;


		}
	}














	//移动
	.main {
		width: 686rpx;
		height: auto;
		margin: 10px auto;
		overflow: hidden
	}

	.order-item {
		width: 686rpx;
		height: 268rpx;
		display: flex;
		position: relative;
		margin: 10px auto;
		align-items: right;
		flex-direction: row;
		border-radius: 48rpx;


	}

	.content-two {
		background: #F5F5F5;
		width: 100%;
		height: 268rpx;
		margin: 0 auto;
		border: 1px solid #C0C0C0;
		line-height: 100px;
		text-align: center;
		border-radius: 48rpx;
		position: relative;

		.content-two-pic {
			width: 220rpx;
			height: 220rpx;
			background-color: #FA8C16;
			margin-top: 25rpx;
			margin-left: 25rpx;
			border-radius: 24rpx;

			image {
				width: 220rpx;
				height: 220rpx;
				background-size: cover;
			}
		}

		.content-two-name {
			width: 160rpx;
			height: 40rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 1000;
			font-size: 40rpx;
			line-height: 40rpx;
			color: #121B36;
			margin-left: 260rpx;
			margin-top: -210rpx;
		}

		.content-two-weight {
			width: 106rpx;
			height: 32rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 32rpx;
			line-height: 32rpx;
			color: #121B36;
			opacity: 0.6;
			margin-left: 260rpx;
			margin-top: 10rpx;
		}

		.content-two-nocoln {
			width: 150rpx;
			height: 40rpx;
			margin-left: 260rpx;
			margin-top: 10rpx;

			.pic {
				width: 40rpx;
				height: 40rpx;
				background-image: url("@/static/Vector (6).png");
			}
			.pic-two {
				width: 40rpx;
				height: 40rpx;
				background-image: url("@/static/Frame (15).png");
			}

			.wenzi {
				width: 80rpx;
				height: 26rpx;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 26rpx;
				line-height: 26rpx;
				color: #FA541C;
				margin-top: -38rpx;
				margin-left: 50rpx;
			}
		}


		.haopin {
			width: 300rpx;
			height: 28rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 28rpx;
			line-height: 28rpx;
			color: #BFBFBF;
			margin-left: 235rpx;

		}

		.fuhao {
			width: 22rpx;
			height: 30rpx;
			background-image: url("@/static/Vector (7).png");
			margin-left: 260rpx;
			margin-top: 5rpx;
		}

		.price {
			display: block;
			width: 58rpx;
			height: 40rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 40rpx;
			line-height: 40rpx;
			color: #FA8C16;
			margin-left: 280rpx;
		}

		.add-pic {
			width: 70rpx;
			height: 70rpx;
			background-image: url("@/static/Frame (7).png");
			position: absolute;
			top: 100rpx;
			left: 580rpx;
		}

		.jiasuan {
			position: absolute;
			width: 56rpx;
			height: 168rpx;
			border: 1px solid #D9D9D9;
			border-radius: 35px;
			top: 50rpx;
			left: 580rpx;

		}

		.add {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			background-image: url("@/static/Frame (8).png");
			background-size: 100%;
			top: 10rpx;
			left: 5rpx;

		}

		.num {
			position: absolute;
			width: 22rpx;
			height: 36rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 36rpx;
			line-height: 36rpx;
			color: #FA8C16;
			margin-top: 70rpx;
			left: 18rpx;
		}

		.sub {
			position: absolute;
			width: 48rpx;
			height: 48rpx;
			background-image: url("@/static/Frame (9).png");
			background-size: 100%;
			top: 120rpx;
			left: 5rpx;
		}
	}

	.remove {
		// margin-left: -10%;
		width: 160rpx;
		height: 100%;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		right: -160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		background: #FA8C16;
		border-radius: 0px 24px 24px 0px;

		.remove-pic {
			width: 64rpx;
			height: 60rpx;
			// background-color: #000000;
			background-image: url("@/static/Vector (5).png");
		}

	}

	.collection {
		margin-right: -5%;
		width: 160rpx;
		height: 100%;
		background-color: red;
		color: #FFFFFF;
		position: absolute;
		top: 0;
		left: -160rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		background: #FA8C16;
		border-radius: 48rpx 0 0 48rpx;

		.collection-pic {
			width: 63rpx;
			height: 60rpx;
			// background-color: #000000;
			background-image: url("@/static/Frame (6).png");
		}
		.collection-pictwo {
			width: 63rpx;
			height: 60rpx;
			// background-color: #000000;
			background-image: url("../static/shoucangaixin.png");
		}
	}

	.item-content {
		width: 1006rpx;
		height: 271.5rpx;
	}

	.delnum {
		width: 635rpx;
		height: 310rpx;
		background: #FFFFFF;
		border-radius: 24px;
		display: flex;
		flex-direction: column;

		.delnum-pic {
			width: 92rpx;
			height: 32rpx;
			margin-left: 280rpx;

			image {
				width: 92rpx;
				height: 32rpx;
				background-size: 100%;
			}
		}

		.delnum-font {
			width: 280rpx;
			height: 28rpx;
			margin-left: 180rpx;
			margin-top: 60rpx;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 28rpx;
			line-height: 28rpx;
			text-align: center;
			color: #000000;
		}

		.delnum-yesornu {
			width: 100%;
			height: 104rpx;
			// margin-bottom: 0;
			margin-top: 100rpx;
			display: flex;
			// background-color: #FA541C;
			border-radius: 0px 0px 24px 24px;

			.delnum-yesornu-no {
				width: 50%;
				height: 100%;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 104rpx;
				text-align: center;
				color: #000000;
			}

			.delnum-yesornu-yes {
				width: 50%;
				height: 100%;
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 104rpx;
				text-align: center;
				color: #FB7A42;
			}
		}
	}
</style>
